<template>
<el-input v-model="page.title" style="width: 240px" placeholder="根据模块名称模糊查询" />
<el-input v-model="page.name" style="width: 240px" placeholder="根据学生姓名模糊查询" />
    <el-select
      v-model="page.type"
      placeholder="请求类型"
      style="width: 240px"
    >
      <el-option
        v-for="item in types"
        :label="item"
        :value="item"
      />
    </el-select>
    <el-date-picker
        v-model="page.startTime"
        type="datetime"
        placeholder="请输入起始时间"
      />
      <el-date-picker
        v-model="page.endTime"
        type="datetime"
        placeholder="请输入结束时间"
      />
    <el-button style="margin-left: 10px;" type="primary" icon="Search" @click="getLogs()" >搜索</el-button>
    <el-button :disabled="dels.length==0" icon="delete" type="danger" @click="delsQuestions()">
        删除选中内容
    </el-button>
    <el-button icon="Refresh" @click="resetQuery()" style="width: 100px; height: 30px;margin-top: 5px">重置</el-button>
    <el-table @selection-change="handleSelectionChange" v-loading="loading" :data="tableData" style="width: 100%;height: 640px;" :stripe="true">
         <el-table-column type="selection" width="55" />
        <el-table-column label="日志id" prop="id" width="110"/>
        <el-table-column label="操作人" prop="name" width="120"/>
        <el-table-column label="所属模块" prop="title" width="120"/>
        <el-table-column label="操作内容" prop="content" width="120"/>
        <el-table-column label="执行方法" prop="methodname" width="300"/>
        <el-table-column label="请求格式" prop="methodtype" width="100"/>
        <el-table-column label="记录时间" prop="opertime" width="200"/>
        <el-table-column label="消耗时间/毫秒" prop="taketime" width="120"/>
        <el-table-column>
        <template #default="scope">
            <el-popover
                placement="top"
                trigger="hover"
                content="查看返回值"
            >
                <template #reference>
                    <el-icon class="hoverColor" @click="edit(scope.row)"><View /></el-icon>
                </template>
            </el-popover>

            <el-popover
                placement="top"
                trigger="hover"
                content="删除该条日志"
            >
                <template #reference>
                    <el-icon class="hoverColor" style="margin-left: 50px;"  @click="delOne(scope.row.id)"><DeleteFilled /></el-icon>
                </template>
            </el-popover>

        </template>
        </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="page.pageNum"
      v-model:page-size="page.pageSize"
      :page-sizes="[1, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-dialog
    v-model="showFlog"
    width="500"
    :title="'日志id: '+formDate.id"
    >
    {{ formDate.methodresult }}
    </el-dialog>
</template>
<script setup>
import { getLogsAll,delLog } from '@/api/admin/logs/logs.js';
import { ref,onMounted,watch } from "vue";
import router from '@/router';
import { ElMessage } from 'element-plus'

const page=ref({
    type:null,
    pageNum:1,
    pageSize:10,
    name:"",
    title:""
})
const types=ref([
    "GET",
    "POST",
    "PUT",
    "DELETE"
])
const tableData =ref([])
const dels =ref([])
const loading =ref(false)
const showFlog =ref(false)
const formDate =ref({})

const getLogs=()=>{
    loading.value=true
    getLogsAll(page.value).then(res=>{
        tableData.value=res.data.obj.list
        loading.value=false
        page.value.total=res.data.obj.total
    })
}
getLogs()
const resetQuery=()=>{
    page.value={
        type:null,
        pageNum:1,
        pageSize:10,
        name:"",
        title:""
    }
}
const edit=(row)=>{
    showFlog.value=true
    formDate.value=row
}
const delOne=(id)=>{
    loading.value=true
    delLog(id).then(res=>{
        ElMessage.success("删除成功")
        getLogs()
        loading.value=false
    })
}
const handleSelectionChange = (val) => {
  dels.value = val

  
}
const delsQuestions=()=>{
    loading.value=true
    dels.value.forEach(element => {
        delLog(element.id)
    });
    loading.value=false
    ElMessage.success("删除成功")
    getLogs()
}
const handleSizeChange = (val) => {
    // page.value.pageSize=val
getLogs()
}
const handleCurrentChange = (val) => {
    // page.value.pageNum=val
getLogs()
}
</script>